<template>
  <div>
    <el-form id="form" ref="form" :model="form" :rules="rules" label-width="80px">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="工程" prop="title">
            <el-input type="input" v-model="form.title" readonly placeholder="点击选择工程">
              <el-button slot="prepend" icon="el-icon-share" @click.navite="queryProject"></el-button>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系人" prop="lxr">
            <el-input v-model="form.lxr" placeholder="请输入联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="lxdh">
            <el-input v-model="form.lxdh" placeholder="请输入联系电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="施工地址" prop="sgdz">
            <el-input v-model="form.sgdz" type="textarea" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第四行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="管径" prop="gj">
            <el-input v-model="form.gj" placeholder="请输入管径" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="材质" prop="cz">
            <el-input v-model="form.cz" placeholder="请输入材质" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第五行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="长度" prop="cd">
            <el-input v-model="form.cd" placeholder="请输入长度" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包工" prop="bg">
            <el-checkbox-group v-model="baogong" @change="handleCheckedCitiesChange">
              <el-checkbox
                v-for="item in bg"
                :label="item.dictValue"
                :key="item.dictValue">{{item.dictLabel}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第六行 -->
      <el-row>
        <el-col :span="12">
          <el-form-item label="预计工期" prop="yjgq">
            <el-input v-model="form.yjgq" placeholder="请输入预计工期" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="starttime">
            <el-date-picker
              style="width: 100%"
              clearable
              v-model="form.starttime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 选择工程弹窗 -->
    <el-dialog
      title="选择工程"
      :visible="show"
      width="50%"
      append-to-body
      @close="handleClose"
    >
      <el-table v-loading="loading" :data="maintainList" @row-click="rowClick">
        <el-table-column label="工程名称" align="center" prop="projectName" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {getDicts} from "@/api/system/dict/data";
import {addRecord, updateRecord} from "@/api/project/record";
import { listMaintain } from "@/api/project/maintain";
export default {
  name: "index",
  props: {
    formInfo: {
      type: Object,
      default: false
    }
  },
  data() {
    return{
      show: false,
      loading: false,
      maintainList: [],
      // 表单参数
      form: {},
      baogong: [],
      bg: [],
      // 表单校验
      rules: {
        title: [
          { required: true, message: "工程名称不能为空", trigger: "change" }
        ],
        lxr: [
          { required: true, message: "联系人不能为空", trigger: "blur" }
        ],
        lxdh: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        sgdz: [
          { required: true, message: "工程施工地址不能为空", trigger: "blur" }
        ],
        yjgq: [
          { required: true, message: "预计工期不能为空", trigger: "blur" }
        ],
        starttime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ]
      }
    }
  },
  created() {
    this.form = this.formInfo
    this.info()
  },
  watch:{
    formInfo(val){
      this.form = val
    }
  },
  methods: {
    info() {
      let than = this
      getDicts('gcjl_sfbg').then(res=>{
        than.bg = res.data
      })
      if (this.form.bg!==undefined && this.form.bg !== null && this.form.bg !== "") {
        this.baogong = this.form.bg.split(',')
      }
    },
    /** 提交按钮 */
    submitForm() {
      let formDom = document.getElementById('form')
      console.log(JSON.stringify(this.getChilds(formDom)))


      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     console.log("form", this.form)
      //     if (this.form.id != null) {
      //       updateRecord(this.form).then(response => {
      //         this.$modal.msgSuccess("修改成功");
      //         this.$emit("close", response.data.id)
      //       })
      //     } else {
      //       addRecord(this.form).then(response => {
      //         this.$modal.msgSuccess("新增成功");
      //         this.$emit("close",response.data.id)
      //       })
      //     }
      //   }
      // });
    },
    getChilds(node) {
      const childs = node.children;
      const result = new Array();
      if(!childs || childs.length === 0) return result;
      for (const child of childs) {
        const childOutput = new Object();
        childOutput.tagName = child.tagName;
        childOutput.className = child.className;
        childOutput.childs = this.getChilds(child);
        result.push(childOutput);
      }
      return result;
    },
    queryProject() {
      this.loading = true
      listMaintain(this.queryParams).then(response => {
        this.maintainList = response.rows;
        this.show = true
        this.loading = false;
      });

    },
    handleCheckedCitiesChange(item) {
      this.form.bg = item.toString()
    },
    handleClose() {
      this.show = false
    },
    rowClick(item){
      this.form.title = item.projectName
      this.handleClose()
    }
  }
}
</script>

<style scoped>

</style>
